<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(243, 194, 194);
        }

        .green {
            background-color: rgb(118, 231, 156);
        }
    </style>
</head>

<body>
    <a href="http://baidu.com" id="link">baidu</a>
    <button id="btn">按钮</button>
    <div id="box" class="box"></div>
    <script>
        const btnEle = document.getElementById('btn')
        const boxEle = document.getElementById('box')
        const linkEle = document.getElementById('link')
        /*
        btnEle.onclick = function(){
            // console.log('点击了一下')
            // boxEle.classList.add('green')
            // if(boxEle.classList.contains('green')){
            //     boxEle.classList.remove('green')
            // }else{
            //     boxEle.classList.add('green')
            // }
            boxEle.classList.toggle("green")
        }
        */
        btnEle.addEventListener('click',function(e){
            console.log(e)
            boxEle.classList.toggle("green")
        })
        linkEle.onclick = function(e){
            //阻止元素的默认行为
            e.preventDefault()
            console.log(e)
        }
    </script>
</body>

</html>